<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群组选择器子元素选择器通配选择器</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function () {
            // $('.box1').css('color','red');

            // alert($('.box1').get(0));//返回js对象   [object HTMLDivElement]
            // alert($('.box1').eq(0));//返回jquery  [object Object]
            // $('.box1').eq(1).css('color','red');//从集合中选第二个的方法

            // $('div,p,strong').css('color','red');//用元素选择器 用逗号,把不同的选择器串起来
            // alert($('div,p,strong').length);//返回11 组合选择器
            // document.querySelectorAll("div,p,strong").length;//返回11 组合选择器
            // $('.box2,#pid,strong').css('color','red');//class选择器 id选择器 元素选择器用逗号串起来

         /*   $('ul li a').css('color','red');//子元素选择器*/
            // $('*').css('color','green');
            //$('ul li *').css('color','green');//通配选择器
            $('div.box3').css('color','red');

        });
    </script>
</head>
<body>
    <script>
    /* 本节课主讲：
    *  1.获得DOM对象
    *       $('.box1').get(0) 返回js对象   [object HTMLDivElement]
     *       $('.box1').eq(0) 返回jquery对象  [object Object]
    *   2.群组选择器 将相同的样式进行合并
    *       用逗号,把不同的选择器串起来
    *       $('.box2,#pid,strong').css('color','red');//class选择器 id选择器 元素选择器用逗号串起来
    *   3.子元素选择器
    *       $('ul li a').css('color','red');//子元素选择器
    *   4.通配选择器
    *       $('ul li *').css('color','green');通配选择器
    *
    * */
    </script>
    <div class="box1">小米</div>
    <div class="box1">大米</div>
    <br />
    <br />
    <div class="box2">div</div>
    <div class="box2">div</div>
    <div>div</div>
    <br />
    <p id="pid">p</p>
    <p>p</p>
    <p>p</p>
    <br />
    <strong class="st">strong</strong>
    <strong>strong</strong>
    <strong>strong</strong>
    <br />
    <br />
    <ul>
        <li><a href="###">超链接</a></li>
        <li><a href="###">超链接</a></li>
        <li><a href="###">超链接</a></li>
        <li><strong>超链接</strong></li>
    </ul>
    <a href="###">超链接</a>
    <a href="###">超链接</a>
    <a href="###">超链接</a>
<div class="box3">小猫咪</div>
<p>我是p元素</p>
<div>小鹿</div>
<p class="box3">我是第二个P元素</p>
</body>
</html>